<script>
export default {
  name: "CardExamplePage",
  data(){
    return {tableData:[
    {
      name:'张飞',
      age : 32,
      sex :'male',
      data:'2024-8-24',
      address:'江苏省南京市',

    },
    {
      name:'张飞',
      age : 32,
      sex :'male',
      data:'2024-8-24',
      address:'江苏省南京市',

    },
    {
      name:'张飞',
      age : 32,
      sex :'male',
      data:'2024-8-24',
      address:'江苏省南京市',

    },
  ]
  }
  }
}
</script>

<template>
<div style="padding: 20px">
  <el-card >
    <div slot="header">
      <span>我是卡片标题</span>
    </div>
    <div>
      <el-table :data = "tableData" stripe border>

        <el-table-column label="姓名" prop="name" width="200">
          <template v-slot="scope">
            <el-tag>
              {{scope.row.name}}
            </el-tag>
          </template>

        </el-table-column>
        <el-table-column label="年龄" prop="age" width="200">    </el-table-column>
        <el-table-column label="性别" prop="sex" width="200">    </el-table-column>
        <el-table-column label="日期" prop="data" width="200">    </el-table-column>
        <el-table-column label="地址" prop="address" width="200"></el-table-column>
        <el-table-column label="操作" >
          <el-button type="primary" size="mini" plain icon="el-icon-edit">编辑</el-button>
          <el-button type="danger" size="mini" plain icon="el-icon-delete"> 删除</el-button>
        </el-table-column>

      </el-table>
    </div>
  </el-card>
</div>
</template>

<style scoped>

</style>